<!--
 * @Author: 宋绍华
 * @Date: 2024-11-11 17:16:16
 * @LastEditors: luosi 1297957337@qq.com
 * @LastEditTime: 2025-01-09 10:55:09
 * @FilePath: \sr_system_manager_ui\src\views\project\components\IntermediateInspectionReview\index.vue
 * @Description: 预算审核
-->
<template>
  <div class="intermediate-inspection-review">
    <div class="title">{{ projectName }}</div>
    <div class="content">
      <el-form :model="form" label-width="auto">
        <el-form-item label="中检材料">
          <div w-full>
            <el-segmented v-model="previewType" :options="opts" style="margin-bottom: 1rem" />
            <FilePreviewMultiple v-if="previewType === 1" :fileList="tableData || []" />
            <el-table v-else :data="tableData" border style="width: 100%">
              <el-table-column prop="name" label="文件名称" min-width="540">
                <template #default="{ row }">
                  <div class="flex items-center">
                    <el-image :src="thumbnail(row.url)" lazy loading="lazy" fit="cover"
                      class="w-[16px] h-[16px] mr-[6px] flex-none" />
                    <div class="mr-[16px] text-[#1D2129] text-[14px]">{{ row?.name }}</div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="createdByName" label="上传人" min-width="240" />
              <el-table-column prop="createdTime" label="上传时间" min-width="240">
                <template #default="{ row }">
                  <div>{{ formateDate(row.createdTime).format('YYYY-MM-DD HH:mm') }}</div>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="240">
                <template #default="{ row }">
                  <el-button link type="primary" @click="handleDownload(row)">下载</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
        <el-form-item label="审核意见" required>
          <QuickText v-model="form.message" style="width: 100%" />
        </el-form-item>
        <el-form-item label="相关文件">
          <FileUpload v-model="form.files" drag :limit="20" :is-show-tip="false" width="400px" />
        </el-form-item>
      </el-form>
      <div class="h-[72px]" />
    </div>
    <div class="footer">
      <el-button type="primary" @click="handleEdit">编辑</el-button>
      <el-button v-loading="rejectLoading" @click="reject">驳回</el-button>
      <el-button v-loading="approveLoading" type="primary" @click="approve">通过</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import QuickText from '@/components/QuickText/index.vue'
import { getApproveMaterialDetailsApi, projectApproveApproveApi, projectApproveRejectApi } from '@/api/project';
import { AttachmentFileInfoDTO, BaseSuccessRespDTO, ProjectMaterialDetailVO } from '@/api/project/types';
import formateDate from '@/utils/formateDate';
import FilePreviewMultiple from '@/components/FilePreviewMultiple/index.vue'
import { thumbnail } from '@/utils/utils'

const { proxy } = getCurrentInstance()

const router = useRouter()
const route = useRoute()
const projectId = computed(() => route.query.projectId)
const projectName = computed(() => route.query.projectName)

const form = ref({
  message: '',
  files: []
})

const previewType = ref(1)
const opts = [
  { label: '预览', value: 1 },
  { label: '列表', value: 2 },
]

const tableData = ref<AttachmentFileInfoDTO[]>([])

const { run: getDetail } = useRequest(() => getApproveMaterialDetailsApi({
  materialType: 1,
  projectId: projectId.value
}), {
  manual: true,
  onSuccess: (res: ProjectMaterialDetailVO) => {
    tableData.value = res?.attachmentFileInfoDTOList || []
  }
})

const { run: approve, loading: approveLoading } = useRequest(() => projectApproveApproveApi({
  projectId: projectId.value,
  type: 3,
  message: form.value.message,
  fileIds: form.value.files?.map(item => item.id) || []
}), {
  manual: true,
  onSuccess: (res: BaseSuccessRespDTO) => {
    if (res?.isSuccess) {
      ElMessage({
        message: '通过成功!',
        type: 'success',
        plain: true,
      })
      proxy.$tab.closePage()
    }
  }
})

const { run: reject, loading: rejectLoading } = useRequest(() => projectApproveRejectApi({
  projectId: projectId.value,
  type: 3,
  message: form.value.message,
  fileIds: form.value.files?.map(item => item.id) || []
}), {
  manual: true,
  onSuccess: (res: BaseSuccessRespDTO) => {
    if (res?.isSuccess) {
      ElMessage({
        message: '驳回成功!',
        type: 'success',
        plain: true,
      })
      proxy.$tab.closePage()
    }
  }
})

const handleDownload = (file) => {
  proxy.$download.downloadFileSync(file?.url, file?.name)
}

const handleEdit = () => {
  router.push({ path: '/project/mine/submitIntermediateInspection', query: { projectId: projectId.value, projectName: projectName.value, type: 'edit' } })
}

onMounted(() => {
  getDetail()
})

</script>

<style lang="scss" scoped>
.intermediate-inspection-review {
  --at-apply: bg-white min-h-full;

  .title {
    --at-apply: py-16px pl-20px text-[16px] font-bold border-b-[1px] border-b-solid border-[#E5E6EB];
  }

  .content {
    --at-apply: p-[20px] bg-white;
  }

  :deep(.el-textarea__inner) {
    min-height: 120px !important;
  }
}

.footer {
  --at-apply: fixed bottom-0 left-0 w-full h-[72px] leading-[72px] text-center border-t-solid border-t-[1px] border-[#E5E6EB] bg-white z-[100];
}
</style>